<%--
  Created by IntelliJ IDEA.
  User: 刘松
  Date: 2020/5/4
  Time: 18:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>制度查阅</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="/lib/layui/layui/css/eleTree.css?2019101815.40">
    <link rel="stylesheet" href="/lib/layui/layui/css/treeTable.css?2019101815.17">
    <link rel="stylesheet" href="/lib/layui/layui/css/layui.css">
    <link rel="stylesheet" href="/lib/layui/layui/css/modules/layer/default/layer.css">
    <link rel="stylesheet" href="/lib/layui/layui/css/layui.css">
    <%--js--%>
    <script type="text/javascript" src="/js/jquery/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="/lib/layui/layui/layui.all.js"></script>
    <script type="text/javascript" src="/js/base/base.js" ></script>
    <script type="text/javascript" src="/lib/layui/layui/global.js"></script>
    <style>
        .container {
            position: relative;
            width: 100%;
            height: 100%;
        }

        .clearfix{
            *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
        }
        .clearfix:after{
            content: "";
            display: block;
            height: 0;
            clear:both;
            visibility: hidden;
        }
        .container {
            position: relative;
            width: 100%;
            height: 100%;
        }
        .project_tree_module {
            float: left;
            width: 250px;
            min-height: 50px;
            box-sizing: border-box;
            height: 100%;
            overflow: hidden;
            box-shadow: 0 0px 5px 0 rgba(0,0,0,.1);
            border-radius: 3px;
            background-color:#F7F7F7;
            margin-right:10px;
        }
        .left{
            margin-top:10px;
            padding:10px;
        }
        .project_info {
            float: left;
            width: calc(100% - 250px);
            box-shadow: 0 0px 5px 0 rgba(0,0,0,.1);
            border-radius: 3px;
        }
        .input{
            display:inline-block;
            padding-left:10px;
            height: 35px;
            line-height: 1.3;
            border-width: 1px;
            border-style: solid;
            background-color: #fff;
            border-radius: 2px;
            border:1px solid #E6E6E6;
        }
        .layui-btn-lg{
            line-height: 35px;
            height:35px;
            margin-top:-3px;
        }
        .content {
            position: absolute;
            top: 61px;
            right: 0;
            bottom: 0;
            left: 0;
        }

        .con_left {
            float: left;
            width: 230px;
            height: 100%;
        }

        .left_List .left_List_item{
            width: 100%;
            line-height: 40px;
            padding-left: 10px;
            border-bottom: 1px solid #ddd;
            border-radius: 3px;
            overflow: hidden;
            box-sizing: border-box;
            word-break: break-all;
            white-space: nowrap;
            text-overflow: ellipsis;
            cursor: pointer;
        }

        .left_List .select{
            background: #c7e1ff;
        }

        .con_right {
            float: left;
            width: calc(100% - 230px);
            height: 100%;
        }

        .project_info {
            float: left;
            width: calc(100% - 270px);
            box-shadow: 0 0px 5px 0 rgba(0,0,0,.1);
            border-radius: 3px;
            background-color:#F7F7F7;
        }

        .project_name {
            font-size: 18px;
            font-weight: 500;
        }

        .layui-form-label {
            width: 130px;
        }
        .layui-input-block{
            margin-left: 170px;
            /*display:inline-block;*/
        }
        #sort_title>div{
            margin-top:60px;
            margin-bottom:60px;
            display:flex;
            justify-content: space-around;
            flex-wrap: nowrap;
        }
        .layui-form-item{
            margin:0 auto;
        }
        .dept_input, .user_input {
            background-color: #ccc;
        }
        .select_input {
            width: 60% !important;
        }

        .disabled {
            border: none;
            background-color: #fff !important;
        }

        .choose_disabled {
            display: none;
        }

        .layui-select-disabled .layui-disabled{
            border: none;
            cursor: default !important;
            color: #222 !important;
        }
        .layui-select-disabled .layui-edge{
            display: none;
        }
        .tab_cone li .one_all:hover{
            background: #b6e0ff !important;
            cursor:pointer;
        }
        .tab_cone{
            width: 100% !important;
            height:99% !important;
        }
        .tab_c{
            margin-left: 0% !important;
        }
        .one_name{
            margin-left: 5px;
            width: 77%;
            line-height: 40px !important;
            text-align: left;
            font-size:10pt;
            color: #333;
            padding-left: 10px;
            text-overflow: inherit;
        }
        .one_all{
            background: #f0f4f7 !important;
            position: relative;

        }
        .one_all{
            height: 40px !important;
            width: 100% !important;
            border-left: none !important;
            border-right: none !important;
        }
        .one_all{
            border: none;
            border-bottom: none;
            background: #f5f7f8 !important;
            border-top: 2px solid #fff!important;
        }
        .one_name img{
            margin-left: 2px;
        }
        h1{
            font-size:10.5pt;
        }
        .two_all{
            width: 100%;
            border-top: 2px solid #fff!important;
        }
        .three{
            border-top: 2px solid #fff!important;
        }
        .two_all h1{
            width: 66%;
            margin-left: 0;
            color: #111;
            text-shadow: none;
            padding-left: 55px;
            line-height: 40px;
        }
        .two .two_all:hover{
            color:#2f8ae3;
            background:#ccebff;
            cursor: pointer;
        }
        .three:hover {
            color: #2f8ae3;
            background: #ccebff;
            cursor:pointer;
        }
        .two_all h1{
            width: 66%;
            margin-left: 0;
            color: #111;
            text-shadow: none;
            padding-left: 55px;
        }
        .down_jiao{
            margin-left: 0;
            position: absolute;
            left:210px;
            margin-top: -24px;
            width: 12px;
            height: 7px;
        }
        .er_img{
            margin-left: 0;
            position:relative;
            left:193px;
            margin-top: -24px;
            width: 12px;
            height: 7px;
        }
        .one{
            background: #fff!important;
        }
        .one_all li:hover{
            background:#ccebff;
            cursor:pointer;
        }
        .one_all li:hover h1{
            color:#2f8ae3;
            cursor:pointer;
        }
        .tab_cone li .one_all:hover{
            background: #b6e0ff !important;
            cursor: pointer;
        }
        .layui-layer,.layui-layer-iframe,.layer-anim{
            top: 0 !important;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="header">
        <div class="headImg" style="padding-top: 10px">
            <span style="font-size:22px;margin-left:10px;color:#494d59;margin-top: 2px"><img style="margin-left:1.5%" src="../img/commonTheme/theme6/icon_summary.png" alt=""><span style="margin-left: 10px">制度文档查阅</span></span>
        </div>
    </div>
    <hr>
    <%--左侧树--%>
    <div class="left clearfix">
        <div id="projectTree" class="project_tree_module" style="height: 80%;">
            <div class="cont" id="client" style="height: 90%">
                <div class="cont_left">
                    <ul class="all_ul" style=">
                        <li style="background-color: #eee;padding-bottom: 7px;">
                            <span style="font-size: 20px;font-weight: 450;display: inline-block;margin-left: -4px;color: #494d59;">
                                <i class="layui-icon layui-icon-tree" style="font-size: 30px;color: #xe62e;position: relative;top: 4px;left: 3px;"></i>
                                制度文档分类
                            </span>
                        </li>
                        <li style=" margin-left: 10px; margin-top: 10px; height: 100%; overflow-y: auto">
                            <div class="tab_c list" lay-filter="projectData">

                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <%--右侧--%>
        <div class="project_info">
            <form class="layui-form" action="" style="float:right;margin-right:2.5%;">
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <input type="text"  id="user_inp"  placeholder="按文档、关键字搜索" class="input">
                        <button type="button" id="user_ser" class="layui-btn layui-btn-lg layui-btn-normal">搜索</button>
                    </div>
                </div>
            </form>
            <table id="institution_tab" lay-filter="institution_tab" style="margin-top:50px;"></table>
        </div>

    </div>
</div>
<script type="text/html" id="doSth">
    <a href="javascript:;" lay-event="history" class="layui-btn  layui-btn-xs layui-btn-normal">历史版本</a>
</script>
</body>
<script>
    var table,eleTree, laydate,eTree,layer;

    $(function(){
        layui.use(['table','eleTree','laydate','layedit'],function(){
            table = layui.table,
                eleTree = layui.eleTree,
                laydate = layui.laydate,
                layer = layui.layer,
                layedit = layui.layedit;

            //渲染表格
            table.render({
                elem:'#institution_tab',
                url:'/InstitutionContent/findContentBySortIds',
                where:{
                    instType:1,
                    approveStatus:'1',
                    instStatus : '1'
                },
                parseData: function(res){ //res 即为原始返回的数据
                    return {
                        "code":0, //解析接口状态
                        "data": res.obj, //解析数据列表
                        "count":res.totleNum,
                    };
                },
                page:true,
                limit:10,
                cols:[[
                    {field:'instName',title:'名称',align:'center',
                        templet:function (d) {
                            return '<a href="javascript:;" style="text-decoration:underline;color:blue">'+d.instName+'</a>'
                        },event:'title'}
                    ,{field:'instNumber',title:'编号',align:'center'}
                    ,{field:'approveStatus',title:'审核状态',align:'center',templet:function (d) {
                            if (d.approveStatus==0){
                                return "待审批"
                            }else if (d.approveStatus==1){
                                return "已批准"
                            }else if(d.approveStatus==2){
                                return "未批准"
                            }else if(d.approveStatus==3){
                                return "未提交"
                            }
                        }}
                    ,{field:'instStatus',title:'使用状态',align:'center',templet:function (d) {
                            if (d.instStatus==0){
                                return "停用"
                            }else{
                                return "生效"
                            }
                        }},
                    {field:'version',title:'当前版本',align:'center'},
                    {field:'',title:'操作',align:'center',toolbar:'#doSth'}
                ]]

            })

            //           渲染树
            eTree = eleTree.render({
                elem:'.tab_c',
                url:'/InstitutionSort/findSortByPermission',
                showCheckbox: false,
                showLine: true,
                cellMinWidth:150,
                request: { // 修改数据为组件需要的数据
                    name: "sortName", // 显示的内容
                    key: "sortId", // 节点id
                    parentId: 'sortParent', // 节点父id
                    isLeaf: "isLeaf",// 是否有子节点
                    children: 'children',
                },
                response: { // 修改响应数据为组件需要的数据
                    statusName: "flag",
                    statusCode: true,
                    dataName: "obj"
                }
            })

            //监听单机事件
            eleTree.on('nodeClick(projectData)',function(d){
                var data = d.data.currentData;

                table.reload('institution_tab', {
                    where:{
                        sortId:data.sortId,
                        approveStatus : '1'
                    }
                })
            })

            //监听工具条事件 查看历史版本
            table.on('tool(institution_tab)',function (obj) {
                var event = obj.event;
                var data = obj.data
                if (event=="history") {
                    //历史版本
                    window.open("/institution/historicalVersion?instId="+data.instId)
                }else if (event=="title"){

                    if(data.instType == 1){
                        layer.open({
                            type: 2,
                            isOutAnim:true,
                            maxmin:true,
                            title:'制度详情',
                            area:['100%','100%'],
                            btnAlign: 'c',
                            btn: ['返回'],
                            content:'/institution/selectInstitution?instId='+data.instId,
                            yes: function(index){
                                layer.close(index);
                            },
                            btn2: function(index){
                                layer.close(index);
                            }
                        });
                    }
                }
            })
        })
    })



    //搜索按钮点击事件，如果表格未渲染，查询成功之后直接渲染表格，若表格已经渲染，查询成功之后重新渲染表格
    $("#user_ser").click(function(){
        let keyWords = $("#user_inp").val();
        let instName = $("#user_inp").val();


        table.reload('institution_tab',{
            where: {
                keyWords: keyWords,
                instName: instName,
                approveStatus:'1',
                instStatus : '1'
            },
            page: {
                curr: 1
            }
        })
    })

</script>
</html>
